<template>
	<view class="content">
		<view class="header">
			<image src="../../../static/wallet.png" mode=""></image>
			<view class="all">
				<view class="name">总资产</view>
				<view class="bot" @click="goTixina">
					<text class="num">{{ all_money }}</text>
					<text>提现</text>
					<u-icon name="arrow-right" color="#ffffff" size="28"></u-icon>
				</view>
			</view>
		</view>
		<view class="chongzhi">
			<view class="title">充值</view>
			<view class="group">
				<view class="item" v-for="(item, ind) in money_arr" :key="ind" :class="{ active: index == ind }" @tap="changeMoney(ind)">
					<text>￥</text>
					{{ item }}
				</view>
				<!-- <view class="item" :class="{active:index == 3}" @tap="changeMoney(300)"><text>￥</text>300</view>
				<view class="item" :class="{active:index == 4}" @tap="changeMoney(400)"><text>￥</text>400</view>
				<view class="item" :class="{active:index == 5}" @tap="changeMoney(500)"><text>￥</text>500</view>
				<view class="item" :class="{active:index == 6}" @tap="changeMoney(600)"><text>￥</text>600</view> -->
				<view class="item">
					<input v-model="input" @focus="ownMoney" type="text" value="" placeholder-style="color:#3FC377" placeholder-class="holder" placeholder="自定义金额" />
				</view>
			</view>
		</view>
		<view class="footer" @click="submit">充值</view>
		<u-popup @close="close" class="pop" v-model="pop_show" mode="center" width="581rpx" height="624rpx" closeable="true">
			<image src="../../../static/item5.png" mode=""></image>
			<text>支付成功</text>
			<text>请保持手机畅通</text>
			<view class="btn" @tap="payEnd">完成</view>
		</u-popup>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			index: 0,
			money_arr: [200, 300, 400, 500, 600],
			money: 200,
			all_money: null,
			code: '',
			pop_show: false,
			input: ''
		};
	},
	onShow() {
		this.getUserInfo();
	},
	onLoad() {
		// console.log(this.$store.state.user.money)
		// #ifdef MP-WEIXIN
		this.getWxcode();
		// #endif
	},
	computed: {
		...mapState({
			user: state => state.user //个人用户信息
		})
	},
	methods: {
		//获取个人信息
		async getUserInfo() {
			let token = uni.getStorageSync('token');
			if (token) {
				let res = await this.$http.post('/api/user/userinfo');
				// this.$store.commit('SAVE_USER',res.data.data.userinfo)
				this.all_money = res.data.data.userinfo.money;
			}
		},
		getWxcode() {
			let that = this;
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					// console.log(loginRes.code);
					that.code = loginRes.code;
				}
			});
		},
		changeMoney(num) {
			this.index = num;
			this.money = this.money_arr[num];
		},
		ownMoney() {
			this.index = -1;
			this.money = null;
		},
		submit() {
			if (this.index == -1) {
				this.money = this.input;
			}
			let that = this;
			var type = '1';
			// #ifdef APP-PLUS
			type = '2';
			// #endif
			// #ifdef MP-WEIXIN

			// #endif
			this.$http
				.post('/api/recharge/add', {
					money: this.money,
					pay_type: 'wallet',
					type: type,
					code: this.code
				})
				.then(res => {
					let result = typeof res.data.data.data == 'string' ? JSON.parse(res.data.data.data) : res.data.data.data;
					// #ifdef APP-PLUS
					this.appPay(result);
					// #endif
					// #ifdef MP-WEIXIN
					this.wxpay(result);
					// #endif
				});
		},
		wxpay(result2) {
			let that = this;
			uni.requestPayment({
				provider: 'wxpay',
				timeStamp: result2.timeStamp,
				nonceStr: result2.nonceStr,
				package: result2.package,
				signType: result2.signType,
				paySign: result2.paySign,
				success: function(res) {
					// console.log('success:' + JSON.stringify(res));
					that.$u.toast('支付成功');
					that.getUserInfo();
					// that.pop_show = true;
				},
				fail: function(err) {
					console.log('fail:' + JSON.stringify(err));
					that.$u.toast('支付失败');
					that.getUserInfo();
				}
			});
		},
		appPay(result2) {
			let that = this;
			uni.requestPayment({
				provider: 'wxpay',
				orderInfo:result2,
				success: res => {
					that.$u.toast('支付成功');
					that.getUserInfo();
					// that.pop_show = true;
				},
				fail: res => {
					// console.log(JSON.stringify(res))
					that.$u.toast('支付失败');
					that.getUserInfo();
				},
				complete: res => {
					console.log(res);
				}
			});
		},
		goTixina() {
			uni.navigateTo({
				url: '/pages/componentB/tixian/tixian'
			});
		},
		//弹出层右上关闭按钮
		close() {
			console.log('关闭了');
			this.pop_show = false;
			uni.switchTab({
				url: '/pages/index/index'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	min-height: 100vh;
	background-color: #f8f8f8;
	overflow: hidden;
}
.header {
	width: 690rpx;
	height: 240rpx;
	margin: 30rpx auto;
	position: relative;
	border-radius: 10rpx;
	image {
		width: 690rpx;
		height: 240rpx;
	}
	.all {
		position: absolute;
		top: 0;
		left: 0;
		padding: 24rpx;
		box-sizing: border-box;
		width: 100%;
		.name {
			font-size: 13px;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
		}
		.bot {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 63rpx;
			.num {
				font-size: 36px;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(255, 255, 255, 1);
				flex: 1;
			}
			text {
				font-size: 16px;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				margin-right: 10rpx;
			}
		}
	}
}
.chongzhi {
	width: 100%;
	background: rgba(255, 255, 255, 1);
	padding: 30rpx;
	box-sizing: border-box;
	.title {
		font-size: 17px;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}
	.group {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		align-items: center;
		margin-top: 18rpx;
		.item {
			width: 210rpx;
			height: 120rpx;
			background: rgba(245, 245, 245, 1);
			border-radius: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 120rpx;
			text-align: center;
			font-size: 45rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #3fc377;
			margin-bottom: 28rpx;
			text {
				font-size: 13px;
			}
			&.active {
				background: rgba(63, 195, 119, 1);
				color: #ffffff;
			}
			input {
				display: block;
				border: none;
				width: 100%;
				font-size: 13px;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(63, 195, 119, 1);
			}
			.holder {
				font-size: 13px;
				font-family: PingFang SC;
				font-weight: bold;
				color: #3fc377;
			}
		}
	}
}
.footer {
	width: 535rpx;
	height: 88rpx;
	background: rgba(63, 195, 119, 1);
	border-radius: 10px;
	margin: 66rpx auto;
	line-height: 88rpx;
	text-align: center;
	font-size: 15px;
	font-family: PingFang SC;
	font-weight: bold;
	color: rgba(255, 255, 255, 1);
}
.pop {
	padding: 24rpx;
	box-sizing: border-box;
	image {
		width: 93rpx;
		height: 104rpx;
		display: block;
		margin: 70rpx auto;
	}
	text {
		font-size: 18px;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		display: block;
	}
	.btn {
		width: 535rpx;
		height: 88rpx;
		background: rgba(63, 195, 119, 1);
		border-radius: 10px;
		margin: 68rpx auto 0;
		line-height: 88rpx;
		text-align: center;
		font-size: 15px;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
	}
}
</style>
